<template>
  <div>
    <Card>
      <div class="marginB10">
        消息状态：
        <RadioGroup v-model="is_read" class="marginR10" @on-change="wrXX">
          <Radio :label="1">
            <span>未读({{unread_msg_count}})</span>
          </Radio>
          <Radio :label="2">
            <span>已读({{read_msg_count}})</span>
          </Radio>
        </RadioGroup>
        
        <Button type="primary" size="small" :disabled="is_read==2 || unread_msg_count==0" class="pullRight" @click="pTreadMsgAll">全部已读</Button>
        <span class=" cCCC pointer relative marginR10 pullRight" style="top:2px;" @click="$app.alert('超过15天的消息，会自动销毁。')">
          <Icon type="ios-help-circle-outline" size="20"/>
        </span>
      </div>
      <Table
        :data="tableData"
        :columns="columns"
        stripe
        border
        class="marginB10"
        :loading="loading"
        :height="$app.winHeight-220"
      ></Table>
      <Page
        :total="total"
        show-sizer
        show-total
        show-elevator
        size="small"
        :page-size="pageSize"
        :page-size-opts="$app.pageAll.pageSizeOpts"
        :current="page"
        @on-change="loadMore"
        @on-page-size-change="changePageSize"
      ></Page>
    </Card>
  </div>
</template>

<script>
export default {
  name: "pTmessages",
  components: {},
  data() {
    let data = {
      tableData: [],
      columns: [],
      is_read: 1//0全部, 1未读,2已读
    };
    //分页相关
    let tool = {
      loading: true, //加载时显示转转
      total: 0, // 所有数据条数
      unread_msg_count:0,
      read_msg_count:0,//已读消息
      page: 1, // 当前页数
      pageSize: $app.pageAll.pageSize // 默认数据返回条数
    };

    return Object.assign(data, tool); // 对象合并
  },
  mounted() {
    this.getData();
  },

  methods: {
    wrXX(){
      this.total= 0; // 所有数据条数
      this.page= 1; // 当前页数
      this.pageSize= $app.pageAll.pageSize; // 默认数据返回条数
      this.getData();
    },
    getData() {
      let { pageSize, page,is_read } = this;

      // 清空原本的数据
      this.loading = true;
      this.columns = [];
      this.tableData = [];

      // 获取数据 type流水类型,0全部, 1未读,2已读
      $ajax.pTmessages(is_read,pageSize, page, resData => {
        this.loading = false;

        this.columns = [
          {
            title: " ",
            type: "index",
            width: 30,
            align: "center ",
            className: "goOnTxt c999"
          },
          {
            title: "标 题",
            key: "title",
            className: "goOnTxt",
            resizable: true
          },
          {
            title: "时间",
            key: "created_at",
            className: "goOnTxt",
            resizable: true,
            width: 160
          },
          {
            title: "操作",
            className: "goOnTxt",
            resizable: true,
            width: 200,
            render: (h, params) => {
              let {
                row: {
                  id,
                  title,
                  content,//消息内容
                  link_url //有无可跳转链接
                }
              } = params;

              let out = [];

              if($app.judgeData(link_url) && is_read==1){
                out.push(
                  h(
                    "span",
                    {
                      class:
                        "  marginR10  cRed textLine",
                      on: {
                        click: () => {
                          //标记已读
                          $ajax.pTreadMsg(id,resData=>{
                            this.$store.commit('upData_messages',resData.unread_msg_count);//右上角头像 未读消息
                          });
                          this.$router.push(link_url);
                        }
                      }
                    },
                    `立即处理`
                  ),
                  h(
                    "span",
                    {
                      class: "marginR10 cCCC"
                    },
                    `|`
                  )
                );
              }

              out.push(
                  h(
                    "span",
                    {
                      class:
                        "  marginR10  cBlue textLine",
                      on: {
                        click: () => {
                          $app.msShowBox(title,content,id,link_url,(is_read==1),()=>{
                            this.getData();//更新列表
                          });
                        }
                      }
                    },
                    `查看详情`
                  ),
                );

              
              return out;
            }
          }
        ];

        this.tableData = resData.list;
        this.total = resData.total;
        this.unread_msg_count=resData.unread_msg_count;
        this.read_msg_count = resData.read_msg_count;

        if(is_read==1){
          this.$store.commit('upData_messages',resData.total);
        }
        
      });
    },
    // 加载更多
    loadMore(page) {
      this.page = page;
      this.getData();
    },
    // 数据返回条
    changePageSize(pageSize) {
      this.page = 1;
      this.pageSize = pageSize;
      this.getData();
    },
    //全部已读
    pTreadMsgAll(){
      $app.confirm('未读消息全部已读？','温馨提示',{
        yesFun:()=>{
          $ajax.pTreadMsgAll(resData=>{
            this.total= 0; // 所有数据条数
            this.page= 1; // 当前页数
            this.pageSize= $app.pageAll.pageSize; // 默认数据返回条数
            this.getData();
          });
        }
      });
      
    }
  }
};
</script>

